<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/style.css" rel="stylesheet" type="text/css" />

        <script id="jquery_script" type="text/javascript" src="js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="js/messageSender.js"></script>
        <script type="text/javascript" src="js/webDB-remote.js"></script>
        <script type="text/javascript" src="js/settings.js"></script>
        <script type="text/javascript" src="js/util.js"></script>
        <script type="text/javascript" src="js/ponto.js"></script>
        <script type="text/javascript" src="js/segment-display.js"></script>
        <script type="text/javascript" src="js/view-display-ponto.js"></script>
        <script type="text/javascript" src="js/marcacoes-popup.js"></script>
        <script type="text/javascript" src="js/notification-remote.js"></script>

        <style type="text/css">
            .topic {
              /*margin-bottom: 1.5em; */
              background: white;
              overflow: hidden;
                text-align: left;
              border-radius: 9px;
              box-shadow: 3px 3px 9px #999;
              -webkit-border-radius: 9px;
              -webkit-box-shadow: 3px 3px 9px #999;
              -moz-border-radius: 9px;
              -moz-box-shadow: 3px 3px 9px #999;
                background-color: rgba(255, 255, 255, 0.7);
            }

            .topic h2 {
              position: relative;
              padding: 0.4em 16px 0.3em 16px;
              font-size: 1.25em;
                line-height: 1.5em;
              font-weight: bold;
              color: rgb(69, 92, 113);
              background-color: rgba(255, 255, 255, 0.3);
                border-bottom: 2px solid rgba(0, 0, 0, 0.2);
              text-shadow: white 2px 2px 4px;
              -webkit-border-top-right-radius: 9px;
              -webkit-border-top-left-radius: 9px;
              -moz-border-top-right-radius: 9px;
              -moz-border-top-left-radius: 9px;
              border-top-right-radius: 9px;
              border-top-left-radius: 9px;
            }

        </style>

    </head>
    <body dir="ltr" scroll="no" unselectable="on">
		<div class="content" id="view_display_ponto">
		  <div class="topic" style="background-color: rgb(36, 30, 30); border: 3px solid #999; width: 300px; height: 188px;">
			<div style="padding-left:20px">
			  <canvas id="display" class="display1" width="260" height="90"></canvas>
			</div>
			<div style="padding-left:20px">
			  <canvas id="display2" class="display2" width="260" height="90"></canvas>
			</div>
		  </div>
		  <div class="topic" style="background-color: rgb(36, 30, 30); border: 3px solid #999; width: 280px; padding:10px;">
			<div class="buttons button-nova-marcacao" style="float:left;width:50px;height:20px;">
			  <p>+Marca</p>
			</div>	
			<div class="buttons button-lista-marcacoes">
			  <img alt="Lista de marcações" src="" />
			</div>
			<div class="buttons button-config" style="float:right;width:20px;height:20px;">
			  <img alt="Configurações" src="" />
			</div>
			<div class="div-marcacoes border-simple-orange esconde">
				<table class="marcacoes">
					<thead>
						<tr>
							<th>
								<div style="float:left;padding-left:2px;">
									<p>Marcações</p>
								</div>
								<div class="slim-button button-marcacao-mais esconde" style="right:5px;float:right;width:50px;height:15px;">
									<p> Mais...</P>
								</div>
							</th>
						</tr>
					</thead>
					<tfoot>
						<tr>
						</tr>
					</tfoot>
					<tbody>						
					</tbody>
				</table>
			</div>
		  </div>
		</div>
		
		
		<div id="configuracoes" class="configuracoes esconde" >
			<table cellspacing="0" cellpadding="0" style="width:100%;height:100%;font-size:12px">
				<thead>
					<tr>
						<th colspan="2" class="head_config"><p>Configurações</p></th>
					</tr>
				</thead>
				<tbody>
					<tr style="height:25px;">
						<td style="width: 60px;"><label for="txtServer">Servidor</label></td>
						<td><input id="txtServer" type="text" class="textbox" style="width:100%;font-size:12px" maxlength="30"></td>
					</tr>
					<tr style="height:25px;">
						<td style="width: 60px;"><label for="txtPort">Porta</label></td>
						<td><input id="txtPort" type="text" class="textbox" style="width:100%;font-size:12px" maxlength="30"></td>
					</tr>
					<tr style="height:25px;">
						<td style="width: 60px;"><label for="txtUsername">Usuário</label></td>
						<td><input id="txtUsername" type="text" class="textbox" style="width:100%;font-size:12px" maxlength="30"></td>
					</tr style="height:25px;">
					<tr style="height:25px;">
						<td><label for="txtPassword">Senha</label></td>
						<td><input id="txtPassword" type="password" class="textbox" style="width:100%;font-size:12px" maxlength="30"></td>
					</tr>
					<tr>
					</tr>
				</tbody>
				<tfoot>
					<tr>
					  <td></td>
					  <td>
							<input id="ok_config" type="button" value="OK" style="width:50px;float:right;right:20px;" />
							<input id="cancelar_config" type="button" value="Cancelar" style="width:70px;float:right;right:20px;" />
					  </td>
					</tr>
				</tfoot>
			</table>
		</div>
		<div class="nova-marcacao esconde" >
			<table cellspacing="0" cellpadding="0" style="width:100%;height:100%;font-size:12px">
				<thead>
					<tr>
						<th colspan="2" class="head_marca"><p>Nova Marcação</p></th>
					</tr>
				</thead>
				<tbody>
					<tr style="height:25px;">
						<td style="width: 60px;"><label for="txtServer">Horário</label></td>
						<td><input id="horario_nova_marca" type="time" class="textbox" style="width:100%;font-size:12px" maxlength="30"></input></td>
					</tr>					
					<tr>
						
					</tr>
				</tbody>
				<tfoot>
					<tr>
					  <td></td>
					  <td>
							<input id="ok_marca" type="button" value="OK" style="width:50px;float:right;right:20px;" />
							<input id="cancelar_marca" type="button" value="Cancelar" style="width:70px;float:right;right:70px;" />
					  </td>
					</tr>
				</tfoot>
			</table>
		</div>
    </body>
</html>